/**
 * zhj
 */
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Button,
} from 'react-native';

const width = Dimensions.get('window').width;

/**
 * title 按钮名字（必填）
 * width(默认屏幕宽度-50)
 * height（默认48）
 * background ：背景色（默认深红）
 *titlecolor 按钮文字颜色（默认白色）
 *selected 是否选中
 *selectedFontColor 选中后文字颜色
 *selectedBackground 选中后按钮颜色
 *isSelected={(selected)=>{

                  }}
 */

export default class MyButton extends Component {
    constructor(props) {
        super(props)
        this.state={
            selected:this.props.selected?this.props.selected:false,
        }
    }

    render() {
        return (
            <TouchableOpacity style={[this.props.style,styles.Button,{ backgroundColor: this.state.selected?this.props.selectedBackground:this.props.background?this.props.background:'#c13331',
                height:this.props.height?this.props.height:48,
                width:this.props.width?this.props.width:width-50,

            }]}
                              activeOpacity={0.2} focusedOpacity={0.5}
                              onPress={()=>{
                                  if (this.props.onPress){
                                      this.props.onPress();
                                  }
                                  if (this.props.selectedBackground) {
                                          this.setState({
                                              selected: !this.state.selected
                                          });


                                      this.props.isSelected(this.props.selected);
                                  }

                              }}
            >
                <Text style={{color:this.state.selected?this.props.selectedFontColor:this.props.titlecolor?this.props.titlecolor:'white',fontSize:this.props.fontSize?this.props.fontSize:16}}>
                    {this.props.title}
                </Text>
            </TouchableOpacity>
        );

    }
}
const styles = StyleSheet.create({
    Button: {
        justifyContent: 'center',
        alignItems: 'center',

    },

});